<template>
  <div class="home-box">
    <van-nav-bar
      left-text="返回"
      :right-text="isFollow ? '取消关注' : '关注'"
      left-arrow
      fixed
      placeholder
      @click-left="handleToBack"
      @click-right="handleToChangeFollow"
    />
    <!-- 个人信息 -->
    <template v-if="loading">
      <div class="card info-box">
        <van-row>
          <van-col span="8">
            <div class="u-flex-col u-col-center">
              <van-image round width="46px" height="46px" :src="userInfo.profile.avatarfull" />
              <span class="u-m-t-6 u-line-1 u-font-14">
                {{
                  userInfo.profile.personaname
                }}
              </span>
            </div>
          </van-col>
          <van-col span="8">
            <div class="u-flex-col u-col-center" v-if="userInfo.profile.plus">
              <van-image
                width="38px"
                height="46px"
                src="https://www.opendota.com/assets/images/dota2/dota_plus_icon.png"
              />
              <span class="u-m-t-6 u-line-1 u-font-14">Dota Plus</span>
            </div>
          </van-col>
          <van-col span="8">
            <div class="u-flex-col u-col-center">
              <div class="u-relative" style="height:42px;">
                <van-image
                  width="46px"
                  height="46px"
                  :src="
                    `https://www.opendota.com/assets/images/dota2/rank_icons/rank_icon_${userInfo.rank_tier ? userInfo.rank_tier.toString()[0] : 0
                    }.png`
                  "
                />
                <van-image
                  v-if="
                    userInfo.rank_tier &&
                    userInfo.rank_tier.toString()[1] !== '0'
                  "
                  class="u-absolute u-top-0 u-left-0"
                  width="46px"
                  height="46px"
                  :src="
                    `https://www.opendota.com/assets/images/dota2/rank_icons/rank_star_${userInfo.rank_tier.toString()[1]
                    }.png`
                  "
                />
              </div>
              <span class="u-m-t-6 u-line-1 u-font-14">
                {{
                  formatRankTier(userInfo.rank_tier, userInfo.leaderboard_rank)
                }}
              </span>
            </div>
          </van-col>
        </van-row>
      </div>

      <!-- 功能区域 -->
      <MainGrid :accountId="accountId"></MainGrid>

      <!-- 最近20场 -->
      <RecentMathchesTable :accountId="accountId"></RecentMathchesTable>

      <!-- 数据总计 -->
      <TotalInfoTable :accountId="accountId"></TotalInfoTable>
    </template>
    <div class="card info-box u-flex u-row-center" style="height:100vh" v-else>
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>
<script setup>
import RecentMathchesTable from './components/RecentMathchesTable/index'
import TotalInfoTable from './components/TotalInfoTable/index'
import MainGrid from './components/MainGrid/index'
import { ref, computed } from "vue";
import { formatRankTier } from "@/utils/dotaHelper.js";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Toast } from "vant";
const route = useRoute();
const router = useRouter();
const store = useStore();
const accountId = computed(() => route.params.account_id);
const userInfo = ref({});
const loading = ref(false);
const isFollow = computed(() => {
  const index = store.getters.followerList.findIndex((item) => {
    return item.accountId === store.getters.accountId;
  });
  return index >= 0
    ? store.getters.followerList[index].followers.includes(accountId.value)
    : false;
});
const handleToBack = () => {
  router.back();
};
const handleToChangeFollow = () => {
  if (isFollow.value) {
    // 取消关注
    store
      .dispatch("follow/removeFollower", accountId.value)
      .then((res) => {
        Toast.success(res);
      })
      .catch((e) => {
        Toast.fail(e);
      });
  } else {
    // 添加关注
    store
      .dispatch("follow/addFollower", accountId.value)
      .then((res) => {
        Toast.success(res);
      })
      .catch((e) => {
        Toast.fail(e);
      });
  }
};
</script>
<style lang="scss" scoped>
.home-box {
  background: #f2f3f5;
  min-height: calc(100vh - 54px);
  .info-box {
    padding: 10px 6px;
  }
  .card {
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .item {
    background: #efefef;
    padding: 6px 4px;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  .bottom-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 10px 0;
    font-size: 12px;
  }
}
</style>
